<template>
  <!-- 平台来源 -->
  <div id="PlatformSourceChart" class="echarts"></div>
</template>

<script setup lang="ts">
  import { ECharts, EChartsOption, init } from "echarts"
  interface ChartProp {
    name: string
    value: number
    percentage: string
  }
  const initChart = (data: any = {}): ECharts => {
    const charEle = document.getElementById("PlatformSourceChart") as HTMLElement
    const charEch: ECharts = init(charEle)
    const option: EChartsOption = {
      grid: {
        top: "0%",
        left: "2%",
        right: "2%",
        bottom: "0%"
        // containLabel: true
      },
      tooltip: {
        trigger: "item",
        formatter: "{b} :  {c}人"
      },
      legend: {
        show: true,
        top: "middle",
        left: "20px",
        icon: "circle",
        orient: "vertical",
        align: "auto",
        itemWidth: 10,
        textStyle: {
          color: "#fff"
        },
        itemGap: 20,
        formatter: function (name: string) {
          let text = ""
          data.data.forEach((val: ChartProp) => {
            if (val.name === name) {
              text = name + " --- " + val.percentage
            }
          })
          return text
        },
        data: data.data.map((val: ChartProp) => val.name)
      },
      series: [
        {
          type: "pie",
          radius: ["60%", "85%"],
          center: ["68%", "45%"],
          color: ["#0E7CE2", "#FF8352", "#E271DE", "#F8456B", "#00FFFF", "#4AEAB0"],
          itemStyle: {
            borderColor: "#031845",
            borderWidth: 10
          },
          data: data.data,
          labelLine: {
            show: false
          },
          label: {
            show: false
          }
        },
        {
          type: "pie",
          radius: ["20%", "28%"],
          center: ["68%", "45%"],
          color: ["#ffffff", "red"],
          startAngle: 105,
          data: [
            {
              value: 30,
              name: "",
              itemStyle: {
                color: "transparent"
              }
            },
            {
              value: 5,
              name: "",
              itemStyle: {
                color: "transparent"
              }
            },
            {
              value: 65,
              name: "ddd",
              itemStyle: {
                color: "#ffffff"
              }
            }
          ],
          silent: true,
          labelLine: {
            show: false
          },
          label: {
            show: false
          }
        },
        {
          type: "pie",
          radius: [0, "30%"],
          center: ["68%", "45%"],
          startAngle: 90,
          data: [
            {
              value: 25,
              name: "1",
              itemStyle: {
                color: "transparent",
                borderWidth: 4,
                borderColor: "#ffffff"
              }
            },

            {
              value: 75,
              name: "2",
              itemStyle: {
                color: "transparent"
              }
            }
          ],
          selectedOffset: 10,
          silent: true,
          labelLine: {
            show: false
          },
          label: {
            show: false
          }
        },
        {
          type: "pie",
          radius: ["96%", "97%"],
          center: ["68%", "45%"],
          color: ["#007afe", "transparent", "#007afe", "transparent", "#007afe", "transparent"],
          data: [
            {
              value: 17,
              name: "11"
            },
            {
              value: 17,
              name: "22"
            },
            {
              value: 17,
              name: "33"
            },
            {
              value: 17,
              name: "44"
            },
            {
              value: 17,
              name: "55"
            },
            {
              value: 17,
              name: "66"
            }
          ],
          silent: true,
          labelLine: {
            show: false
          },
          label: {
            show: false
          }
        },
        {
          type: "pie",
          zlevel: 0,
          silent: true,
          radius: ["45%", "46%"],
          center: ["68%", "45%"],
          z: 10,
          label: {
            show: false
          },
          labelLine: {
            show: false
          },
          data: new Array(150).fill("").map((val: string, index: number) => {
            if (index % 3 === 0) {
              return {
                name: (index + 1).toString(),
                value: 10,
                itemStyle: {
                  color: "#fff",
                  borderWidth: 0,
                  borderColor: "rgba(0,0,0,0)"
                }
              }
            } else {
              return {
                name: (index + 1).toString(),
                value: 25,
                itemStyle: {
                  color: "rgba(0,0,0,0)",
                  borderWidth: 0,
                  borderColor: "rgba(0,0,0,0)"
                }
              }
            }
          })
        },
        {
          type: "pie",
          zlevel: 0,
          silent: true,
          radius: ["58%", "60%"],
          center: ["68%", "45%"],
          z: 10,
          startAngle: 90,
          label: {
            show: false
          },
          color: ["red", "blue", "red", "blue"],

          labelLine: {
            show: false
          },

          data: [
            {
              name: "r1",
              value: 25,
              itemStyle: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(51,149,191,0.5)" // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(51,149,191,0)" // 100% 处的颜色
                    }
                  ],
                  global: false // 缺省为 false
                }
              }
            },
            {
              name: "r2",
              value: 25,
              itemStyle: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(0,0,0,0)" // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(51,149,191,0.5)" // 100% 处的颜色
                    }
                  ],
                  global: false // 缺省为 false
                }
              }
            },
            {
              name: "r3",
              value: 25,
              itemStyle: {
                // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(51,149,191,0)" // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(51,149,191,0.5)" // 100% 处的颜色
                    }
                  ],
                  global: false // 缺省为 false
                }
              }
            },
            {
              name: "r4",
              value: 25,
              itemStyle: {
                // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(51,149,191,0.5)" // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(0,0,0,0)" // 100% 处的颜色
                    }
                  ],
                  global: false // 缺省为 false
                }
              }
            }
          ]
        }
      ]
    }
    charEch.setOption(option, true)
    return charEch
  }
  defineExpose({
    initChart
  })
</script>
<style lang="scss" scoped>
  .echarts {
    width: 100%;
    height: 100%;
  }
</style>
